<!DOCTYPE html>
<html>
    <head>
        <title>模型服务器</title>
        <%- include headInclude.ejs %>
        <style>
            .main-content{
                position: absolute;
                top:0;
                bottom:0;
                left:0;
                right:0;
            }
        </style>
    </head>
    <body class="sticky-header">
        <section>
        <!-- 左导航栏 -->
        <%- include header.ejs %>
        <div class="main-content">
            <!-- 上导航栏 -->
            <%- include nav.ejs %>

            <div style="min-height: 600px">
                <!--<div class="wrapper">-->
                            <section class="panel">
                                <header class="panel-heading" style="background: #D1D5E1;border-bottom: none;opacity:0.8;">
                                    <h3 style="margin: 0;">欢迎来到模型容器！</h3>
                                </header>
                                <div class="panel-body" id="panel-body">
                                    <div id="gallery" class="media-gal">
                                        <div class="images item " id="image1">
                                            <a href="/modelser/all" data-toggle="modal">
                                                <img class="gallery-img" src="images/gallery/modelser_all.png" alt="" />
                                            </a>
                                            <div>
                                                <a href="/modelser/all">模型一览</a>
                                            </div>
                                        </div>
                                        <div class="images item " id="image2">
                                            <a href="/note" data-toggle="modal">
                                                <img class="gallery-img" src="images/gallery/note.png" alt="" />
                                            </a>
                                            <div>
                                                <a href="/note">本地消息</a>
                                            </div>
                                        </div>
                                        <div class="images item " id="image3">
                                            <a href="/status" data-toggle="modal">
                                                <img class="gallery-img" src="images/gallery/status.png" alt="" />
                                            </a>
                                            <div>
                                                <a href="/status">服务器状态</a>
                                            </div>
                                        </div>
                                        <div class="images item " id="image4">
                                            <a href="modelser/new" data-toggle="modal">
                                                <img class="gallery-img" src="images/gallery/modelser_new.png" alt="" />
                                            </a>
                                            <div>
                                                <a href="modelser/new">模型部署</a>
                                            </div>
                                        </div>
                                        <div class="images item " id="image5">
                                            <a href="/modelserrun/all" data-toggle="modal">
                                                <img class="gallery-img" src="images/gallery/modelserrun.png" alt="" />
                                            </a>
                                            <div>
                                                <a href="/modelserrun/all">模型运行</a>
                                            </div>
                                        </div>
                                        <div class="images item " id="image6">
                                            <a href="/child-node/all" data-toggle="modal">
                                                <img class="gallery-img" src="images/gallery/child.png" alt="" />
                                            </a>
                                            <div>
                                                <a href="/child-node/all">远程节点</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                <!--</div>-->
            </div>

            <%- include footer.ejs %>
        </div>
    </section>
        <%- include footerInclude.ejs %>
        <!--加载动画-->
        <script src="/js/jquery.isotope.js"></script>
        <script type="text/javascript">
            $(function() {
                var $container = $('#gallery');
                $container.isotope({
                    itemSelector: '.item',
                    animationOptions: {
                        duration: 750,
                        easing: 'linear',
                        queue: false
                    }
                });
            });
        </script>
        <script type="text/javascript">
            var width = ($("#panel-body").width() - 25*4)/3;
            var height = 254/339*width;
            width += "px";
            height += "px";
            $(".item").css({
                "width":width,
                "height":height
            });
            $(".item img").css({
                "width":"100%",
                "height":"100%"
            });
        </script>
    </body>
</html>